<template>
	<view class="page">
    <view class="search-box">
      <input 
        class="search-input" 
        v-model="keyword" 
        placeholder="请输入商品名称" 
        @confirm="fuzzySearch"
      />
      <view class="search-btn" @click="fuzzySearch">搜索</view>
    </view>
    <view class="product-list">
      <view class="product-item" v-for="(item, index) in productList" :key="index" @click="goDetail(item)">
        <view class="product-info">
          <image class="product-image" :src="item.img" mode="aspectFill"></image>
          <text class="product-name">{{item.name}}</text>
          <text class="product-price">¥{{item.price}}</text>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
import { baseUrl } from '@/config';

export default {
	data() {
		return {
      productList: [],
      keyword: ''
		};
	},
	watch: {
	},
  onShow(){
    this.getProductList();
  },

	methods: {
    getProductList() {
      uni.request({
        url: baseUrl + '/v1/product/allSearch',
       
        success: (res) => {
          this.productList = res.data.data;
        }
      });
    },
    fuzzySearch() {
      uni.request({
        url: baseUrl + '/v1/index/fuzzySearch',
        data: {
          name: this.keyword
        },
        success: (res) => {
          this.productList = res.data.data;
        }
      });
    },
    goDetail(item){
      
      uni.navigateTo({
           url: `/pages/product-detail/index?id=${item.id}`
        });
			},
	}
};
</script>

<style scoped lang="scss">
.page {
	background-size: 100% 100%;
	padding: 64rpx 32rpx;
	height: calc(100vh - 88rpx);
	box-sizing: border-box;
	.search-box {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 40rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		.search-input {
			flex: 1;
			height: 60rpx;
			padding: 0 20rpx;
			font-size: 28rpx;
		}
		.search-btn {
			padding: 0 30rpx;
			height: 60rpx;
			line-height: 60rpx;
			background-color: #4cd964;
			color: #fff;
			border-radius: 30rpx;
			font-size: 28rpx;
		}
	}
	.form-content {
		height: 80%;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 60rpx 40rpx 80rpx;
		position: relative;
	}
	.button2 {
		position: absolute;
		// z-index: 667;
		bottom: -130px;
		left:40rpx;
		right: 40rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 16rpx;
		color: #ffffff;
		background: #bd173e;
		margin: 40rpx auto 0;
		text-align: center;
	}
  .button1 {
		position: absolute;
		// z-index: 667;
		bottom: -80px;
		left:40rpx;
		right: 40rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 16rpx;
		color: #ffffff;
		background: #ffb80f;
		margin: 40rpx auto 0;
		text-align: center;
	}
  .button {
		position: absolute;
		bottom: -30px;
		left:40rpx;
		right: 40rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 16rpx;
		color: #ffffff;
		background: #76e00f;
		margin: 40rpx auto 0;
		text-align: center;
	}
  .product-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .product-item {
      width: 48%;
      margin-bottom: 20rpx;
      background: #fff;
      border-radius: 12rpx;
      overflow: hidden;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
      .product-info {
        padding: 16rpx;
        .product-image {
          width: 100%;
          height: 200rpx;
          border-radius: 8rpx;
          margin-bottom: 10rpx;
        }
        .product-name {
          font-size: 28rpx;
          color: #333;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          line-height: 1.4;
        }
        .product-price {
          font-size: 32rpx;
          color: #ff4d4f;
          margin-top: 8rpx;
          display: block;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
